<script setup>
import { ref } from 'vue';
const props = defineProps({
  title: {type: String, required: true}
})
let num = ref(1);
const clickNumAddBtn = () => {
    num.value++;
    console.log(`Hook组件num: ${num.value}`);
};
const renderTitle = `这里是 - ${props.title}`;
</script>

<template>
  <div class="container">
    <div class="title">{{renderTitle}}</div>
    <div class="button" @click="clickNumAddBtn">num+1</div>
    <p>num： {{num}}</p>
  </div>
</template>

<style scoped>
.container{
    padding: 20px;
}
.button{
    height: 24px; line-height: 24px; font-size: 16px; width: 60px; border: 1px solid green; 
    border-radius: 6px; text-align: center;
}
</style>
